<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./area.js"></script>

</head>
<body>
    
    <div>
        <select id="prov"></select>
        <select id="city"></select>
        <select id="area"></select>
    </div>
    <script>
        console.log(place.data);

        var prov =  document.querySelector('#prov');
        var city = document.querySelector('#city');
        var area = document.querySelector('#area');
        
        // 1.设置下拉选择框的默认值
        // 2.获取对象的的选择对应的城市的数组，用监听事件
        // 2.1先清空渲染
        // 2.2获取当前下拉框对象内选中option的索引值
        // 2.3循环这个数组 ,得到数组的的所有对象
        // 2.4在循环中渲染数据并累加
        // 注意省市区数组的索引号，渲染之间的关系
        
        var index = 0;
        var index2 = 0;
        for (let i = 0; i < place.data.length; i++) {
            // console.log(place.data.length);
            prov.innerHTML += `<option value="">${place.data[i].provname}</option>`
        }
        for (let i = 0; i < place.data[index].city.length; i++) {                
                city.innerHTML += `<option value="">${place.data[index].city[i].cityname}</option>`
            }
        // console.log(place);
        for (let i = 0; i < place.data[index].city[index2].dist.length; i++) {
                    area.innerHTML += `<option value="">${place.data[index].city[index2].dist[i]}</option>`
                    // console.log(place.data[index].city[index2].dist[i]);
            }
        
        prov.addEventListener('change', function () {
            city.innerHTML = '';
            index = prov.selectedIndex;
            for (let i = 0; i < place.data[index].city.length; i++) {
                city.innerHTML += `<option value="">${place.data[index].city[i].cityname}</option>`
            } 
            area.innerHTML = '<option value="">区县</option>';
        })
        city.addEventListener('change', function () {
            area.innerHTML = '';
                index2 = city.selectedIndex;
                for (let i = 0; i < place.data[index].city[index2].dist.length; i++) {
                    area.innerHTML += `<option value="">${place.data[index].city[index2].dist[i]}</option>`
                }
            })
    </script>
</body>
</html>